<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>金融银行首页（移动端）</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_952130_o3k9cv7sau.css"/>
    <link rel="stylesheet" href="../css/css.css"/>
</head>
<body>

<header>
    <div flex="main:justify cross:center" class="top1">
        <!--<i class="iconfont icon-iconfind"></i>-->
        <input type="text" placeholder="点击输入你想要的内容"/>
        <i class="iconfont icon-kefu16px"></i>
    </div>
    
  <ul class="top2" flex="main:justify cross:center">
      <li flex="main:center cross:center dir:top">
          <i class="iconfont icon-yinxingqiajiaoyihuoyuedujiancha"></i>
          <p>刷卡收款</p>
      </li>
      <li flex="main:center cross:center dir:top">
          <i class="iconfont icon-43"></i>
          <p>无卡支付</p>
      </li>
      <li flex="main:center cross:center dir:top">
          <i class="iconfont icon-wodeshangquan"></i>
          <p>附近商圈</p>
      </li>
      <li flex="main:center cross:center dir:top">
          <i class="iconfont icon-xinyongqia1"></i>
          <p>还信用卡</p>
      </li>
  </ul>

</header>


<!--第一层-->
<section class="f1">
    <ul>
        <li class="f1_01" flex="main:center cross:center dir:top">
            <i class="iconfont icon-youhuiquan"></i>
            <p>优惠券</p>
        </li>
        <li class="f1_02"flex="main:center cross:center dir:top">
            <i class="iconfont icon-youhuiquan"></i>
            <p>推荐有礼</p>
        </li>
        <li class="f1_03"flex="main:center cross:center dir:top">
            <i class="iconfont icon-youhuiquan"></i>
            <p>我的商城</p>
        </li>
        <li class="f1_01"flex="main:center cross:center dir:top">
            <i class="iconfont icon-youhuiquan"></i>
            <p>惠买单</p>
        </li>
        <li class="f1_04"flex="main:center cross:center dir:top">
            <i class="iconfont icon-youhuiquan"></i>
            <p>推荐办卡</p>
        </li>
        <li class="f1_05"flex="main:center cross:center dir:top">
            <i class="iconfont icon-youhuiquan"></i>
            <p>金融理财</p>
        </li>
        <li class="f1_01"flex="main:center cross:center dir:top">
            <i class="iconfont icon-youhuiquan"></i>
            <p>极速贷款</p>
        </li>
        <li class="f1_03"flex="main:center cross:center dir:top">
            <i class="iconfont icon-youhuiquan"></i>
            <p>行用卡申请</p>
        </li>
    </ul>

</section>

<!--第二层-->
<section class="f2">
<div></div>

</section>


<!--第三层-->
<section class="f3">
<div class="f3_01" flex="cross:center">
    <span></span>
    收支明细
</div>

<div class="f3_02" flex="main:center cross:center">
    <div flex="main:center dir:top cross:center">
        <div flex="main:center cross:center" class="f3_money01">
        <span>￥</span>
        <span>168.5</span>
        <span>万</span>
        </div>
        <p>本月收款金额</p>
    </div>

    <div></div>

    <div flex="main:center dir:top cross:center">
        <div flex="main:center cross:center"  class="f3_money02">
        <span>￥</span>
        <span>16.05</span>
        <span>万</span>
        </div>
        <p>本月支出金额</p>
    </div>

</div>

<div class="f3_03">
        <button type="button">
            查看详细账单
        </button>
</div>

</section>

<!--底部-->
<footer>
    <ul flex>
        <li flex="main:center dir:top cross:center">
            <i class="iconfont icon-shouye"></i>
            <p>首页</p>

        </li>
        <li flex="main:center dir:top cross:center">
            <i class="iconfont icon-licaihover"></i>
            <p>理财</p>

        </li>
        <li flex="main:center dir:top cross:center" class="xiaoxi">
            <span class="yuandian"></span>
            <i class="iconfont icon-icon"></i>
            <p>消息</p>

        </li>
        <li flex="main:center dir:top cross:center">
            <i class="iconfont icon-weibiaoti-_huabanfuben"></i>
            <p>我的</p>

        </li>
    </ul>
    
    
</footer>





</body>
</html>